<template>
  <div class="app-container">

      <div class="Label">
        <!-- <div class="leftLabel">
          <div class="each" :class="searchForm.category_id == '' ? 'isEach' : ''" @click="tagCategoryWay()">全部</div>
          <div
            v-for="item, index in tagCategoryList"
            :key="index"
            :class="searchForm.category_id == item.id ? 'isEach' : ''"
            class="each"
            @click="tagCategoryWay(item.id)"
          >{{
             item.category_name }}
            <div class="right" @click.stop="">
              <el-popover placement="right" trigger="click">
                <div style="display: flex; justify-content: space-between;">
                  <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delClassWay(item)">
                    <el-button slot="reference" type="danger" size="mini"> 删除
                    </el-button>
                  </el-popconfirm>
                  <el-button type="primary" size="mini" @click="putClassWay(item)">修改</el-button>
                </div>
                <i slot="reference" class="el-icon-more" />
              </el-popover>
            </div>
          </div>
        </div> -->
        <div class="rightLabel">
          <el-row>
            <el-col>
              <el-table
                ref="labelMultipleSelectionTable"
                v-loading="loading"
                :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }"
                highlight-current-row
                :data="TagList"
                style="width: 100%"
                :row-key="row=>row.id"
                @selection-change="handleSelectionChange"
              >
                <el-table-column align="center" width="55" reserve-selection type="selection" />
                <el-table-column align="center" width="200" prop="id" label="ID" />
                <el-table-column align="center" width="200" prop="id" label="ID" />
                <el-table-column align="center" prop="tag_name" label="分组名称" />
              </el-table>
            </el-col>
          </el-row>
          <el-row class="marginTop" style="text-align: right">
            <el-pagination
              :current-page="searchForm.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="searchForm.count"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
      </div>
  </div>
</template>
<script>
import { getTagList, gettagCategoryList, addtags, deltag, addtagCategory, deltagCategory } from '@/api/user/index'
export default {
  data() {
    return {
      title: '添加标签',
      classTitle: '添加分类',
      dialogLabel: false,
      dialogClass: false,
      loading: false,
      currentPage4: 4,
      TagList: [],
      tagCategoryList: [],
      ruleForm: {
        category_id: '',
        tag_name: ''
      },
      ruleFormClass: {
        category_name: ''
      },
      searchForm: {
        category_id: '',
        page: 1,
        count: 10
      },
      total: 0,
      rules: {
        category_id: [{
          required: true, validator: (rule, value, callback) => {
            if (!value) {
              return callback(new Error('分类不能为空'))
            }
            callback()
          }, trigger: 'chenge'
        }],
        tag_name: [{
          required: true, validator: (rule, value, callback) => {
            if (!value) {
              return callback(new Error('标签名称不能为空'))
            }
            callback()
          }, trigger: 'blur'
        }]
      },
      rulesClass: {
        category_name: [{
          required: true, validator: (rule, value, callback) => {
            if (!value) {
              return callback(new Error('分类名称不能为空'))
            }
            callback()
          }, trigger: 'blur'
        }]
      },
      multipleSelection: [],
      // 回显避免重复
      // rowSelectFlag: false,
      isRedisplay: false,
      choosedLabelList: [] // 选中的标签
    }
  },
  created() {
    this.getListWay()
    this.gettagCategoryListWay()
  },
  methods: {
    getListWay() {
      this.loading = true
      getTagList(this.searchForm).then((res) => {
        this.loading = false
        if (res.code !== 200) {
          this.$messages.error(res.msg)
          return
        }
        this.TagList = res.data.list
        this.total = res.data.total
      })
    },
    gettagCategoryListWay() {
      gettagCategoryList().then((res) => {
        if (res.code !== 200) {
          this.$messages.error(res.msg)
          return
        }
        this.tagCategoryList = res.data.list
      })
    },
    // 删除标签
    deltagsWay(row) {
      deltag({ id: row.id }).then((res) => {
        if (res.code === 200) {
          this.$messages.success('删除成功')
          this.getListWay()
        } else {
          this.$messages.error(res.msg)
        }
      })
    },
    // 修改
    puttagsWay(row) {
      this.ruleForm = JSON.parse(JSON.stringify(row))
      this.title = '修改标签'
      this.dialogLabel = true
    },
    // 打开弹框
    addLabel() {
      this.ruleForm.category_id = this.searchForm.category_id
      this.dialogLabel = true
      this.title = '添加标签'
    },
    // 关闭弹框
    CloseDialogLabel() {
      this.ruleForm = {
        category_id: '',
        tag_name: ''
      }
      this.ruleFormClass = {
        category_name: ''
      }
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields()
      }
      if (this.$refs.rulesClass) {
        this.$refs.rulesClass.resetFields()
      }
      this.dialogLabel = false
      this.dialogClass = false
    },
    // 切换分类
    tagCategoryWay(id) {
      if (!id) {
        this.searchForm.category_id = ''
      } else {
        this.searchForm.category_id = id
        this.ruleForm.category_id = id
      }
      this.searchForm.page = 1
      this.getListWay()
    },
    // 提交
    submitForm(formName) {
      var _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addtags(_this.ruleForm).then((res) => {
            if (res.code !== 200) {
              _this.$messages.error(res.msg)
              return
            }
            _this.CloseDialogLabel()
            _this.getListWay()
          })
        } else {
          return false
        }
      })
    },
    addClassWay() {
      this.dialogClass = true
      this.classTitle = '添加分类'
    },

    // 修改分类
    putClassWay(row) {
      this.ruleFormClass = JSON.parse(JSON.stringify(row))
      this.classTitle = '修改分类'
      this.dialogClass = true
    },

    // 删除分类
    delClassWay(row) {
      var _this = this
      deltagCategory({ id: row.id }).then((res) => {
        if (res.code === 200) {
          _this.gettagCategoryListWay()
          this.$messages.success('删除成功')
        } else {
          this.$messages.error(res.msg)
        }
      })
    },
    submitFormClass(formName) {
      var _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addtagCategory(_this.ruleFormClass).then((res) => {
            if (res.code !== 200) {
              _this.$messages.error(res.msg)
              return
            }
            this.$messages.success('操作成功')
            _this.CloseDialogLabel()
            _this.gettagCategoryListWay()
          })
        } else {
          return false
        }
      })
    },

    handleSizeChange(val) {
      this.searchForm.count = val
      this.getListWay()
    },
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getListWay()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('userlabelchange', val)
    },
    // 回显用户标签
    redisplayUser(list) {
      this.choosedLabelList = list
      this.isRedisplay = true
      if (this.TagList.length > 0) {
        this.doRedisplay()
      }
    },
    doRedisplay() {
      this.choosedLabelList.forEach(item => {
        const label = this.TagList.find((label) => String(label.id) === item.id)
        if (label) {
          this.multipleSelection.push(label)
        }
      })
      // 回显
      this.$nextTick(() => {
        this.multipleSelection.forEach(item => {
          this.$refs.labelMultipleSelectionTable.toggleRowSelection(item, true)
        })
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.app-container {
  .Label {
    display: flex;
  }

  .leftLabel {
    min-width: 200px;
    max-height: 80vh;
    min-height: 60vh;
    display: inline-block;

    .each {
      padding: 0 20px;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
      font-size: 14px;

      .right {
        transition: .3s;
        display: none;
        float: right;
        font-size: 700;
      }
    }

    .each:hover {
      .right {
        display: inline-block;
      }
    }

    .isEach {
      position: relative;
      background-color: #eff6fe;
      color: #2d8cf0;

    }

    .isEach::after {
      content: "";
      position: absolute;
      height: 100%;
      width: 2px;
      background-color: #2d8cf0;
      top: 0px;
      right: 0px;
    }
  }

  .rightLabel {
    flex: 1;
    border-left: 1px solid #ededed;
    padding: 20px;
  }
}
</style>
